<script type="text/javascript">
var level_edit;
var level_delete;
$(document).ready(function(){
/* Start Variable Declaration */
    var level_source;
    var level_adapter;
    var level_buttonAdd;
    var level_searchField;
    var level_expander=$('#level_expander');
    var level_save=$("#level_save");
    var level_reset=$("#level_reset");
    var level_grid=$('#level_grid');

/* Form Component Declaration */
	$('.inputfield').jqxInput({ theme : global_theme });
    level_expander.jqxExpander({width: '100%', theme : global_theme, toggleMode : 'none', expanded : false});
    level_save.jqxButton();
    level_save.bind('click', function(e){ level_save_form(e); });
    level_reset.jqxButton();
    level_reset.bind('click', level_reset_form);
    
/* Grid And Toolbar Declaration */
    level_source={
        id : 'level_id',
        url : 'index.php/c_level/get_list',
        datatype : 'json',
        root : 'results',
		data : {search_text : ''},
        datafields : [
            { name : 'level_id' },
            { name : 'level_nama' },
            { name : 'level_keterangan' },
            { name : 'level_aktif' }
        ],
		addrow: function (rowid, rowdata, position, commit) {
			commit(true);
		},
        beforeprocessing : function(data){
            level_source.totalrecords = data[0].total;
        }
    }
    level_adapter = new $.jqx.dataAdapter(level_source);
	
	level_buttonAdd = $("<button style='margin-left: 5px;'><img src='assets/images/icons/add.png'> Tambah Data</button>");
    level_buttonAdd.jqxButton({ width : 120 });
    level_buttonAdd.bind('click', function(){ 
		level_expander.jqxExpander('expand');
		level_det_source['data']['level_id'] = 0;
		level_det_adapter.dataBind();
		level_expander.jqxExpander('expand'); 
	});
    level_searchField = $('<input type="text" class="inputfield" name="level_search" placeholder="Pencarian">');
    level_searchField.jqxInput({ theme : global_theme });

    level_grid.jqxGrid({
        source : level_adapter,
        width : '100%',
        theme : global_theme,
        pagesize : 15,
        pagesizeoptions : [15],
        sortable : true,
		pageable: true,
        filterable : true,
        columnsresize : true,
        autoheight : true,
        virtualmode : true,
        showtoolbar: true,
        rendertoolbar: function (toolbar) {
            var me = this;
            var container = $("<div style='margin: 5px;'></div>");
			container.append(level_buttonAdd);
			container.append(' | ');
            container.append(level_searchField);
            toolbar.append(container);
        },
        rendergridrows : function(){
            return level_adapter.records;
        },
        columns : [
            { text : 'Id', dataField : 'level_id', hidden : true },
            { text : 'Nama', dataField : 'level_nama' },
            { text : 'Keterangan', dataField : 'level_keterangan' },
            { text : 'Aktif', dataField : 'level_aktif', width:50 ,columntype: 'checkbox' },
			{ text : '&nbsp;', width: 30, cellsrenderer : function(row){
					var record = level_grid.jqxGrid('getrowdata', row);
					var id = record.level_id;
					return '<img src="assets/images/icons/edit.png" onClick="level_edit(event, ' + id + ')" title="Ubah Data" style="margin:2px 7px 2px 7px;"/>';
				}
			},
			{ text : '&nbsp;', width: 30, cellsrenderer : function(row){
					var record = level_grid.jqxGrid('getrowdata', row);
					var id = record.level_id;
					return '<img src="assets/images/icons/delete.png" onClick="level_delete(event, ' + id + ')" title="Hapus Data" style="margin:2px 7px 2px 7px;"/>';
				}
			}
        ]
    });
/* Grid Detail level */
	var level_det_grid = $("#level_det_grid");
    level_det_source={
        url : 'index.php/c_level/get_list_skor',
        datatype : 'json',
        root : 'results',
		data : {level_id : 0},
        datafields : [
            { name : 'skor_id' },
            { name : 'skor_juara_id' },
            { name : 'skor_angka'},
            { name : 'juara_nama'}
        ],
        beforeprocessing : function(data){
            level_det_source.totalrecords = data[0].total;
        },
		addrow: function (rowid, rowdata, position, commit) {
			commit(true);
		}
    }
    level_det_adapter = new $.jqx.dataAdapter(level_det_source);
   
    level_det_grid.jqxGrid({
        source : level_det_adapter,
        width : 400,
        theme : global_theme,
        pagesize : 15,
        pagesizeoptions : [15],
        sortable : true,
		pageable: true,
        filterable : true,
        columnsresize : true,
        autoheight : true,
        virtualmode : true,
		editable: true,
		selectionmode: 'singlerow',
		editmode: 'selectedrow',
        rendergridrows : function(){
            return level_det_adapter.records;
        },
        columns : [
            { text : 'Juara', dataField : 'juara_nama'} ,
            { text : 'Skor', dataField : 'skor_angka'}
        ]
    });
/* Function Declaration */
    function level_reset_form(){
        level_expander.jqxExpander('collapse');
		level_det_grid.jqxGrid('clear');
    }
    function level_save_form(e){
        e.preventDefault();
        var params = new Object();
        params.level_id=$('#level_id').val();
        params.form_data=$('#level_form').serializeObject();
        params.detail=level_det_source.records;
        params=JSON.stringify(params);
        $.ajax({
            url : 'c_level/save',
            method : 'post',
            data : {params:params},
            success : function(response){
                var res = $.parseJSON(response);
                level_grid.jqxGrid('updatebounddata');
                $.global_show_notif(MSAVE_SUCCESS,'success');
                level_reset.click();
            }
        });
    }
	level_edit = function(e, level_id){
		var rowindex = level_grid.jqxGrid('getselectedrowindex');
		var data_record = level_grid.jqxGrid('getrowdata', rowindex);
		$("#level_form").unserializeObject(data_record);
		
		level_expander.jqxExpander('expand');
		level_det_source['data']['level_id'] = level_id;
		level_det_adapter.dataBind();
	}
	level_delete = function(e, level_id){
		var rowindex = level_grid.jqxGrid('getselectedrowindex');
		var data_record = level_grid.jqxGrid('getrowdata', rowindex);
		$.global_show_confirm('Peringatan',MCONFIRM_DELETE_MASTER);
		$("#confirm_window_ok").click(function(){
			var process = $.global_show_processing();
			$.ajax({
				url : 'c_level/delete',
				method : 'post',
				data : {level_id:level_id},
				success : function(response){
					process.hide();
					var res = $.parseJSON(response);
					level_grid.jqxGrid('updatebounddata');
					$.global_show_notif(MSAVE_SUCCESS,'success');
					level_reset.click();
				}
			});
		});
	}
	level_searchField.on('keydown', function(e){
		if(e.keyCode == 13){
			level_source['data']['search_text'] = $(this).val();
			level_grid.jqxGrid('gotopage',0);
			level_grid.jqxGrid('updatebounddata');
		}
	});
});
</script>
<div>
    <div id="level_expander" style="padding-bottom : 10px;">
        <div>Form Tambah/Ubah Data Level</div>
        <div>
            <form class="form-horizontal" id="level_form" style="padding:10px;overflow:hidden;">
                <input type="hidden" id="level_id" name="level_id">
                <div class="form-group">
                    <label class="col-sm-2 control-label">Nama</label>
                    <div class="col-sm-4"><input type="text" class="inputfield" name="level_nama"></div>
                </div>
                <div class="form-group">
                    <label class="col-sm-2 control-label">Keterangan</label>
                    <div class="col-sm-4"><input type="text" class="inputfield" name="level_keterangan"></div>
                </div>
				<div id="level_det_grid"></div><br/>
                <div class="form-group">
                    <div class="col-sm-offset-2 col-sm-4 text-center">
                        <button type="button" id="level_save">Simpan</button>
                        <button type="reset" id="level_reset">Batal</button>
                    </div>
                </div>
            </form>
        </div>
    </div>
    <div id="level_grid"></div>
</div>